<template>
  <div class="v-editor-models-tree-select g-jc-sb">
    <!-- {{row.value}} -->
    <div class="horizontal">
      <div
        v-for="(item, index) of valueData"
        :key="index"
        class="value-item"
      >
        <img
          style="margin-right: 4px; height: 16px"
          :src="item.icon"
        />
        <span v-if="handleSplit(item).length">
          <span
            v-for="(con, index) in handleSplit(item)"
            :key="index"
          >
            <span
              v-if="con.isTerm"
              class="show-underline"
              @contextmenu.stop="event => showDetailTerm(event, con.name)"
            >
              {{ con.name }}
            </span>
            <span v-else>{{ con.name }}</span>
          </span>
        </span>
        <span v-else>{{ item.name }}</span>
      </div>

      <div
        v-if="selected && !row.readonly && !specialModelDisabled && !isModelDisabled && !tableElementDisabled"
        class="add-btn"
      >
        <img
          src="statics/icons/app/iconmore.png"
          class="g-pointer"
          @click="handleAdd"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow, ModelValue } from "../../types";
import { ref, Ref, computed, watch, inject } from "vue";
import { BusEvent, PropertyKey } from "@/constants/Enums";
import SpecifyActivityModal from "@/modules/model/modals/createItemFlow/specifyActivityModal.vue";
import { modelService } from "@/modules/model/service";
import { ContainTermName, splitOriginTextWithTerms } from "@/mdesign-lib/mdesign-graph.umd.js";
import { showDetailTermCommon } from "@/modules/model/service/termBankService";

const isModelDisabled = inject("isModelDisabled", ref(false)) as Ref<boolean>;

/**
 * 模型多选-树选择弹窗
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
  tableElementDisabled?: boolean;
  mode?: string; // 新增横向horizontal模式, 以便在一行内显示内容
}>();

const valueData = computed(() => {
  return (props.row.value || []) as ModelValue[];
});

const specialModelDisabled = computed(() => {
  const specalPropertyKey = new Set([PropertyKey["Element_ownedElement"]]);
  return specalPropertyKey.has(props.row.key as PropertyKey);
});

const selectedModelId = ref("");

// const disabledRemove = computed(() => {
//   return valueData.value.length == 0 || (props.row.nullable === false && valueData.value.length == 1);
// });

watch(
  () => props.selected,
  val => {
    if (val === false) {
      selectedModelId.value = "";
    }
  }
);

const handleSplit = (value: ModelValue) => {
  let _containTermName: ContainTermName[] = [];
  _containTermName = splitOriginTextWithTerms(value.name || "", value.terms || []);
  return _containTermName;
};

function showDetailTerm(event: MouseEvent, termText: string) {
  if (props.row.readonly || isModelDisabled?.value) return;
  showDetailTermCommon(event, termText);
}

const handleAdd = async () => {
  const projectId = app.activeProject?.id;
  if (!projectId) return;
  const row = props.row;
  const res = await SpecifyActivityModal.popup({ flowModelId: row.modelId });
  const fromToActivityGroup = res.sourceActivities.map((fromActivity, index: string) => ({
    fromActivity,
    toActivity: res.targetActivities[index]
  }));
  await modelService.updateItemFlowFromAndToActivity(fromToActivityGroup, projectId, row.modelId);
  app.$bus.emit(BusEvent.REFRESH_PROPERTY, row.modelId);
  // const { sourceActivities, targetActivities, activities } = res;
  // const dto: UpdateModelPropertyDto = {
  //   projectId,
  //   value: sourceActivities,
  //   instanceId: row.modelId,
  //   dataType: PropertyDataType.INSTANCE,
  //   isMultiplicity: true,
  //   key: PropertyKey.SysML_ItemFlow_fromActivity
  // };
  // const dto1: UpdateModelPropertyDto = {
  //   projectId,
  //   value: targetActivities,
  //   instanceId: row.modelId,
  //   dataType: PropertyDataType.INSTANCE,
  //   isMultiplicity: true,
  //   key: PropertyKey.SysML_ItemFlow_toActivity
  // };
  // const dto2: UpdateModelPropertyDto = {
  //   projectId,
  //   value: activities,
  //   instanceId: row.modelId,
  //   dataType: PropertyDataType.STRING,
  //   isMultiplicity: true,
  //   key: PropertyKey.SysML_ItemFlow_activities
  // };

  // await modelService.updateModelProperty(dto);
  // await modelService.updateModelProperty(dto1);
  // await modelService.updateModelProperty(dto2);

  // const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow(props.row, app.activeProject!.id);
  // dto.value = inputvalue.value;
  // let res = await modelService.updateModelProperty(dto);
  // if (res) {
  //   app.$bus.emit(BusEvent.REFRESH_POPERTY, props.row.modelId);

  // }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/theme.scss";
.v-editor-models-tree-select {
  // height: 100%;
  ._disable {
    cursor: not-allowed;
    color: #c1c5cb;
    filter: grayscale(100);
  }
  ._selected {
    color: $theme-color;
  }
  ._list_scroll {
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  }
  .horizontal {
    height: 24px;
    width: 100%;
    padding-right: 30px;
    padding-left: 11px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 24px;
    .value-item {
      display: inline-block;
      height: 16px;
      margin-right: 10px;
      line-height: 16px;
      img {
        margin-right: 6px;
        line-height: 16px;
        vertical-align: middle;
      }
      span {
        line-height: 14px;
        vertical-align: middle;
      }
    }
    .add-btn {
      line-height: 1;
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
    }
  }
}
</style>
